<!--
 * @Descripttion: 
 * @version: 
 * @Author: cyj
 * @Date: 2022-12-13 22:00:30
-->
<!-- 标签导航组件 -->
<template>
    <div class="tags-list">
        <div class="alltags" @click="showAllTags" ref="alltaglist">
            <div class="all">
                <span>{{ tagTitle }}</span>
                <el-icon>
                    <ArrowRight />
                </el-icon>
            </div>
        </div>
        <transition enter-active-class="animate__animated animate__fadeIn"
            leave-active-class="animate__animated animate__fadeOut">
            <div class="all-tag-list" v-if="isShow">
                <div class="body">
                    <div class="title">
                        <div class="tname" @click="send(all)">
                            <span :class="{ activeHot: tagTitle === '全部歌单' }">{{ all.name }}</span>
                        </div>
                    </div>
                    <div class="sub">
                        <div class="sub-item">
                            <div class="sub-item-title">
                                <span class="iconfont icon-diqiu01"></span>
                                <span>{{ discover.categories[0] }}</span>
                            </div>
                            <div class="deal">
                                <div class="sub-item-tags" v-for="(item, index) in discover.langList" :key="index"
                                    @click="send(item, index, discover.categories[0])"
                                    :class="{ activeHot: currentTagIndexA === index }">
                                    <span>{{ item.name }}</span>
                                </div>
                            </div>
                        </div>
                        <div class="sub-item">
                            <div class="sub-item-title">
                                <span class="iconfont icon-yinglangshangwufenggetubiao-31"></span>
                                <span>{{ discover.categories[1] }}</span>
                            </div>
                            <div class="deal">
                                <div class="sub-item-tags" v-for="(item, index) in discover.styleList" :key="index"
                                    @click="send(item, index, discover.categories[1])"
                                    :class="{ activeHot: currentTagIndexB === index }">
                                    <span>{{ item.name }}</span>
                                </div>
                            </div>
                        </div>
                        <div class="sub-item">
                            <div class="sub-item-title">
                                <span class="iconfont icon-kafei"></span>
                                <span>{{ discover.categories[2] }}</span>
                            </div>
                            <div class="deal">
                                <div class="sub-item-tags" v-for="(item, index) in discover.senseList" :key="index"
                                    @click="send(item, index, discover.categories[2])"
                                    :class="{ activeHot: currentTagIndexC === index }">
                                    <span>{{ item.name }}</span>
                                </div>
                            </div>
                        </div>
                        <div class="sub-item">
                            <div class="sub-item-title">
                                <span class="iconfont icon-xiaolian"></span>
                                <span>{{ discover.categories[3] }}</span>
                            </div>
                            <div class="deal">
                                <div class="sub-item-tags" v-for="(item, index) in discover.moodList" :key="index"
                                    @click="send(item, index, discover.categories[3])"
                                    :class="{ activeHot: currentTagIndexD === index }">
                                    <span>{{ item.name }}</span>
                                </div>
                            </div>
                        </div>
                        <div class="sub-item">
                            <div class="sub-item-title">
                                <span class="iconfont icon-caidan"></span>
                                <span>{{ discover.categories[4] }}</span>
                            </div>
                            <div class="deal">
                                <div class="sub-item-tags" v-for="(item, index) in discover.themeList" :key="index"
                                    @click="send(item, index, discover.categories[4])"
                                    :class="{ activeHot: currentTagIndexE === index }">
                                    <span>{{ item.name }}</span>
                                </div>
                            </div>
                        </div>
                    </div>
                </div>
            </div>
        </transition>


        <div class="hottags">
            <div class="hottags-item" v-for="(item, index) in hotTagsList" :key="item.id" @click="sendH(item, index)"
                :class="{ activeHot: currentTagIndex === index }">
                {{ item.name }}
            </div>
        </div>
    </div>
</template>

<script setup>
import 'animate.css';
import { useDiscover } from '../store/discovermusic'
import { ref, getCurrentInstance, onMounted } from 'vue'
const instance = getCurrentInstance()
const discover = useDiscover()
let isShow = ref(false)
let tagTitle = ref('全部歌单')
//记录点击标签名的下标
let currentTagIndex = ref()
let currentTagIndexA = ref()
let currentTagIndexB = ref()
let currentTagIndexC = ref()
let currentTagIndexD = ref()
let currentTagIndexE = ref()

const emit = defineEmits(['click'])

//点击所有标签名触发的事件处理函数
function send(item, index, attr) {
    //记录当前点击标签名的下标 —— 实现联动效果
    if (attr === '语种') {
        currentTagIndexA.value = index
        currentTagIndexB.value = null
        currentTagIndexC.value = null
        currentTagIndexD.value = null
        currentTagIndexE.value = null
        //若找到热门数组中也有 当前点击的标签名 返回其在热门数组中的下标
        let i = discover.hotTagsList.findIndex(ele => {
            return ele.name === item.name
        })
        //热门标签进行赋值
        currentTagIndex.value = i
    }
    else if (attr === '风格') {
        currentTagIndexB.value = index
        currentTagIndexA.value = null
        currentTagIndexC.value = null
        currentTagIndexD.value = null
        currentTagIndexE.value = null
        let i = discover.hotTagsList.findIndex(ele => {
            return ele.name === item.name
        })
        //热门标签进行赋值
        currentTagIndex.value = i
    }
    else if (attr === '场景') {
        currentTagIndexC.value = index
        currentTagIndexA.value = null
        currentTagIndexB.value = null
        currentTagIndexD.value = null
        currentTagIndexE.value = null
        let i = discover.hotTagsList.findIndex(ele => {
            return ele.name === item.name
        })
        //热门标签进行赋值
        currentTagIndex.value = i
    }
    else if (attr === '情感') {
        currentTagIndexD.value = index
        currentTagIndexA.value = null
        currentTagIndexB.value = null
        currentTagIndexC.value = null
        currentTagIndexE.value = null
        let i = discover.hotTagsList.findIndex(ele => {
            return ele.name === item.name
        })
        //热门标签进行赋值
        currentTagIndex.value = i
    }
    else if (attr === '主题') {
        currentTagIndexE.value = index
        currentTagIndexD.value = null
        currentTagIndexA.value = null
        currentTagIndexB.value = null
        currentTagIndexC.value = null
        let i = discover.hotTagsList.findIndex(ele => {
            return ele.name === item.name
        })
        //热门标签进行赋值
        currentTagIndex.value = i
    }
    else {
        currentTagIndexB.value = null
        currentTagIndexA.value = null
        currentTagIndexC.value = null
        currentTagIndexD.value = null
        currentTagIndexE.value = null
        let i = discover.hotTagsList.findIndex(ele => {
            return ele.name === item.name
        })
        //热门标签进行赋值
        currentTagIndex.value = i
    }

    //将点击的tag名称传给父组件
    emit('click', item.name)
    //然后将点击的标签名作为标签标题
    tagTitle.value = item.name
}

//点击热门标签触发的事件处理函数
function sendH(item, index) {
    console.log(item);
    currentTagIndex.value = index
    //将点击的tag名称传给父组件
    emit('click', item.name)
    // 实现热门标签与全部标签的联动效果
    if (item.category === 0) {
        let index = getIndex(item.name, discover.langList)
        currentTagIndexA.value = index
        currentTagIndexB.value = null
        currentTagIndexC.value = null
        currentTagIndexD.value = null
        currentTagIndexE.value = null
    }
    else if (item.category === 1) {
        let index = getIndex(item.name, discover.styleList)
        currentTagIndexB.value = index
        currentTagIndexA.value = null
        currentTagIndexC.value = null
        currentTagIndexD.value = null
        currentTagIndexE.value = null
    }
    else if (item.category === 2) {
        let index = getIndex(item.name, discover.senseList)
        currentTagIndexC.value = index
        currentTagIndexB.value = null
        currentTagIndexA.value = null
        currentTagIndexD.value = null
        currentTagIndexE.value = null
    } else if (item.category === 3) {
        let index = getIndex(item.name, discover.moodList)
        currentTagIndexD.value = index
        currentTagIndexB.value = null
        currentTagIndexA.value = null
        currentTagIndexC.value = null
        currentTagIndexE.value = null
    } else if (item.category === 4) {
        let index = getIndex(item.name, discover.themeList)
        currentTagIndexE.value = index
        currentTagIndexB.value = null
        currentTagIndexA.value = null
        currentTagIndexC.value = null
        currentTagIndexD.value = null
    }

    //然后将点击的标签名作为标签标题
    tagTitle.value = item.name
}

//查看全部标签数组中的下标
function getIndex(name, array) {
    let index = array.findIndex(ele => {
        return name === ele.name
    })
    return index
}

//接收父组件传递的数据
defineProps({
    hotTagsList: {
        type: Array,
        default: []
    },
    all: {
        type: Object,
        default: {}
    }
})

//监视点击其他区域就关闭所有歌单标签函数
function watchAllTags() {
    document.addEventListener('click', (event) => {
        //获取ref节点元素
        let all = instance.ctx.$refs.alltaglist
        if (all) {
            //若点击的不是被打上ref节点的元素，就关闭
            if (!all.contains(event.target)) {
                isShow.value = false
            }
        }
    })
}

//是否展示全部歌单签名函数
function showAllTags() {
    isShow.value = !isShow.value
}

onMounted(() => {
    watchAllTags()
})
</script>

<style lang="scss" scoped>
.tags-list {
    position: relative;
    margin-top: 20px;
    display: flex;
    justify-content: space-between;

    .all-tag-list {
        position: absolute;
        top: 35px;
        left: 10px;
        width: 750px;
        height: 740px;
        background: white;
        z-index: 99;
        border-radius: 8px;
        box-shadow: 0px 0px 10px 5px #eee;

        .body {
            margin: 10px 20px;

            .title {
                height: 50px;
                border-bottom: 1px solid #e5e5e5;

                .tname {
                    line-height: 50px;
                    width: 100px;
                }

                .tname:hover {
                    color: #fd544e;
                }
            }

            .sub {
                margin-top: 20px;

                &-item {
                    display: flex;
                    margin-bottom: 30px;

                    &-title {
                        display: flex;
                        align-items: center;
                        color: #999999;
                        margin-right: 50px;

                        .iconfont {
                            margin-right: 8px;
                        }
                    }

                    .deal {
                        width: 600px;
                        display: flex;
                        flex-wrap: wrap;

                        .sub-item-tags {

                            text-align: center;
                            cursor: pointer;
                            margin: 7px 10px;
                            width: 100px;
                        }
                    }

                    &-tags:hover {
                        color: #fd544e;
                    }
                }

            }
        }
    }

    .alltags {
        .all {
            cursor: pointer;
            display: flex;
            align-items: center;
            margin-left: 10px;
            border-radius: 15px;
            padding: 5px 15px;
            border: 1px solid #d8d8d8;

            &:hover {
                background-color: #f2f2f2;
            }
        }
    }

    .hottags {
        display: flex;
        justify-content: space-between;

        &-item {
            cursor: pointer;
            color: #676767;
            font-size: 12px;
            padding: 0 15px;
            display: flex;
            align-items: center;
        }

        &-item:hover {
            color: black;
        }
    }
}

.activeHot {
    // padding: 0px 10px;
    border-radius: 15px;
    color: #fd544e !important;
    background-color: #fff6f6;
}
</style>